<template>
  <div>
    <el-form ref="form" :model="teacher" label-width="80px" style="padding-top: 30px;">
      <el-form-item label="讲师名称">
        <el-input v-model="teacher.name" ></el-input>
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="teacher.level" placeholder="请选择">
          <el-option label="高级讲师" value="1"></el-option>
          <el-option label="首席讲师" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="讲师资历">
        <el-input v-model="teacher.career" placeholder="一句话说明讲师" ></el-input>
      </el-form-item>
      <el-form-item label="讲师简介">
        <el-input type="textarea" v-model="teacher.intro" rows="10"></el-input>
      </el-form-item>

      <div style="margin: 30px 0 40px 40px">
        <!--上传-->
        <pan-thumb :image="teacher.avatar" />



        <image-cropper
          v-show="imagecropperShow"
          :key="imagecropperKey"
          :width="300"
          :height="300"
          :url="BASE_API+'/oss'"
          field="file"
          @close="close"
          @crop-upload-success="cropSuccess"
        />
        <el-button type="primary"
                   icon="el-icon-upload"
                   @click="imagecropperShow=true">
          更换头像
        </el-button>

      </div>



      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>




  </div>

</template>

<script>
  import teacher from '@/api/teacher'
  import ImageCropper from '@/components/ImageCropper'
  import PanThumb from '@/components/PanThumb'

    export default {
        name: "save",
      components: { ImageCropper, PanThumb },
      data(){
          return{
            teacher:{},//讲师
            imagecropperShow: false,//上传框状态
            imagecropperKey: 0,//上传key
            BASE_API:process.env.VUE_APP_BASE_API,//ip 端口号请求前缀
            isAdd:true//此次操作是否是添加
          }
      },
      created(){
        //如果路由中存在id则是修改操作，回显数据
        if(this.$route.params.id){
          this.getById()
          this.isAdd = false
        }
      },
      methods:{
        //添加讲师
        addTeacher(){
          teacher.addTeacher(this.teacher)
            .then(response=>{
              if(response.data.add){
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
                //跳转到讲师列表
                this.$router.push({path:'/teacher/index'})
              }
            })
        },
        //提交按钮
        submitForm(){
          if(this.isAdd){
            this.addTeacher()
          }else{
            this.updateTeacher()
          }

        },

        //重置
        resetForm(){
          this.teacher = {}
        },

        //上传成功后
        cropSuccess(data){
          this.imagecropperShow = false
          this.imagecropperKey = this.imagecropperKey + 1
          this.teacher.avatar = data.url

        },
        //关闭上传框
        close(){
          this.imagecropperShow = false
        },
        //根据id查询讲师
        getById(){
          teacher.getById(this.$route.params.id)
            .then(response=>{
              this.teacher = response.data.teacher
            })
        },
        //修改讲师
        updateTeacher(){
          //向teacher对象中添加id
          this.teacher.id = this.$route.params.id
          teacher.updateTeacher(this.teacher)
            .then(response=>{
              if(response.data.edit){
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                });
                //回到讲师列表页
                this.$router.push({path:'/teacher/index'})
              }
            })
        }


      }
    }
</script>

<style scoped>
  .avatar{
    width: 200px;
    height: 200px;
    border-radius: 50%;
  }
</style>
